<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 如下就是vue 声明式导航 -->
    <p>
        <a href="#/home">首页</a>
        <a href="#/category">分类</a>
        <a href="#/car">购物车</a>
        <a href="#/mine">我的</a>
    </p>

    <!-- 该位置就是最终要渲染的页面 -->
    <div id="router-view"></div>

</body>

</html>

<script>
    //希望当url中的hash 值改变的时候, 我能监听到
    // 使用hashchange 事件监听浏览器的hash值变化
    window.onhashchange = () => {
        console.log('hash变了');
        console.log(location);
        if (location.hash == '#/home') {
            document.querySelector('#router-view').innerHTML = '首页'
            // 放置不同的组件

        }
        if (location.hash == '#/category') {
            document.querySelector('#router-view').innerHTML = '分类'

        }
        if (location.hash == '#/car') {
            document.querySelector('#router-view').innerHTML = '购物车'

        }
        if (location.hash == '#/mine') {
            document.querySelector('#router-view').innerHTML = '我的'

        }
    }
</script>